import { DatePicker, NavBar } from 'antd-mobile'
import './index.scss'
import classNames from 'classnames'
import _ from 'lodash'
import { useEffect, useMemo, useState } from 'react'
import dayjs from 'dayjs'
import { useSelector } from 'react-redux'
import DailyBill from './components/DailyBill'
const Month = () => {
    const { billList } = useSelector(state => state.bill)
    // 按月做数据的分组
    const monthGroup = useMemo(() => {
        // return 计算之后的值
        return _.groupBy(billList, (item) => dayjs(item.date).format("YYYY-MM"))
    }, [billList])
    const [dateVisible, setDateVisible] = useState(false)
    // 时间选择不能超过当前时间
    const now = new Date()
    // 控制时间显示
    const [currentDate, setCurrentDate] = useState(() => {
        return dayjs().format("YYYY-MM")
    })
    // 所选月数据
    const [currentMonthList, setMonthList] = useState([])
    const monthResult = useMemo(() => {
        // 支出 / 收入 / 结余
        const calGroup = _.groupBy(currentMonthList, (item) => item.type)
        const pay = calGroup['pay'] ? calGroup['pay'].reduce((a, c) => a + c.money, 0) : 0
        const income = calGroup['income'] ? calGroup['income'].reduce((a, c) => a + c.money, 0) : 0
        return {
            pay,
            income,
            total: pay + income
        }
    }, [currentMonthList])
    // 确认回调
    const confirmDate = (date) => {
        const formateDate = dayjs(date).format("YYYY-MM")
        setCurrentDate(formateDate)
        if (!monthGroup[formateDate]) monthGroup[formateDate] = []
        setMonthList(monthGroup[formateDate])
    }
    // 数据按日分组
    const dayGroup = useMemo(() => {
        const tmpList = currentMonthList.reverse().sort((a, b) => {
            return Number(dayjs(b.date).format("YYYYMMDDHHmmss")) - Number(dayjs(a.date).format("YYYYMMDDHHmmss"))
        })
        const groupData = _.groupBy(tmpList, (item => dayjs(item.date).format("YYYY-MM-DD")))
        const keys = Object.keys(groupData)
        return {
            groupData,
            keys
        }
    }, [currentMonthList])


    // 初始化
    useEffect(() => {
        // 边界值控制
        if (monthGroup[currentDate]) setMonthList(monthGroup[currentDate])
    }, [monthGroup])
    return (
        <div className="monthlyBill">
            <NavBar className="nav" backIcon={false}>
                月度收支
            </NavBar>
            <div className="content">
                <div className="header">
                    {/* 时间切换区域 */}
                    <div className="date" onClick={() => setDateVisible(true)}>
                        <span className="text">
                            {currentDate}月账单
                        </span>
                        {/* 思路：根据当前弹框打开的状态控制expand类名是否存在 */}
                        <span className={classNames('arrow', { 'expand': dateVisible })}></span>
                    </div>
                    {/* 统计区域 */}
                    <div className='twoLineOverview'>
                        <div className="item">
                            <span className="money">{monthResult.pay.toFixed(2)}</span>
                            <span className="type">支出</span>
                        </div>
                        <div className="item">
                            <span className="money">{monthResult.income.toFixed(2)}</span>
                            <span className="type">收入</span>
                        </div>
                        <div className="item">
                            <span className="money">{monthResult.total.toFixed(2)}</span>
                            <span className="type">结余</span>
                        </div>
                    </div>
                </div>
                {
                    dayGroup.keys.map(key => (
                        <DailyBill key={key} date={key} billList={dayGroup.groupData[key]}></DailyBill>
                    ))
                }
            </div>
            {/* 时间选择器 */}
            <DatePicker
                visible={dateVisible}
                onClose={() => setDateVisible(false)}
                precision='month'
                max={now}
                onConfirm={confirmDate}
            />
        </div >
    )
}

export default Month